<template>
	<div class="category-wrapper">
		<ul class="cate-list">
			<li v-for="(item,index) in tabmenu" :key="index" :class="{active:item.ID == seleMenu}" @click="switch_type(item.ID,'parent')">{{item.TypeName}}</li>
		</ul>
		<ul class="sub-list">
			<li v-for='(itemCon,index) in tab_content'   :class="{active:itemCon.ID == select_tab_content}"  @click="switch_type(itemCon.ID,'child')">{{itemCon.TypeName}}</li>
		</ul>
	</div>

</template>

<script>
	export default {
		name: "tabType",
		props: {
			tab: {
				type: Array,
				defalt: []
			},
			tabcontent: {
				type: Array,
				defalt: []
			}
		},
		computed: {
			seleMenu() {
				for (let item in this.tabcontent) {
					if (this.tabcontent[item].ParentId == 0) {
						this.select_index =this.tabcontent[item].ID
					}
				}
				return this.select_index
			},
			tab_content() {
				var tab_con = []
				for (let item in this.tabcontent) {
					if (this.tabcontent[item].ParentId !== 0) {
						tab_con.push(this.tabcontent[item])
					}
				}
				return tab_con
			},
			tabmenu() {
				return this.tab
			},
			select_tab_content(){
				return this.tab_content_select
			}
		},
		data() {
			return {
				select_index: 0,
				tab_content_select:0
			}

		},
		methods: {
			switch_type(id,tab_type) {
				if(tab_type==="child"){
					this.tab_content_select=id
				}else{
					this.tab_content_select=0
				}
				this.$emit('switch',{id:id,tabType:tab_type})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.category-wrapper {
		margin-bottom: 10px;
	}

	.cate-list {
		border-bottom: 1px solid #ccc;
		min-height: 36px;
	}

	.cate-list>li {
		list-style: none;
		float: left;
		padding: 0 10px;
		cursor: pointer;
		line-height: 36px;

	}

	.cate-list .active {
		color: #5c7aff;
	}

	.sub-list {
		height: 36px;
	}

	.sub-list>li {
		list-style: none;
		float: left;
		padding: 0 10px;
		cursor: pointer;
		line-height: 36px;
	}
	.sub-list .active {
		color: #5c7aff;
	}
</style>
